<template>
    <div class="news">
        <ul>

            <li>
                <RouterLink
                    :to="`/news/detail1?id=${newsList[0].id}&title=${newsList[0].title}&content=${newsList[0].content}`">
                    {{ newsList[0].title }}</RouterLink>
            </li>


            <li>
                <RouterLink :to="{
                        path: '/news/detail2',
                        query: {
                            id: newsList[1].id,
                            title: newsList[1].title,
                            content: newsList[1].content
                        }
                    }">{{ newsList[1].title }}</RouterLink>
            </li>


            <li>
                <RouterLink :to="`/news/detail3/${newsList[2].id}/${newsList[2].title}/${newsList[2].content}`">{{
                        newsList[2].title }}</RouterLink>
            </li>


            <li>
                <RouterLink :to="{
                        name: 'new4',
                        params: {
                            id: newsList[3].id,
                            title: newsList[3].title,
                            content: newsList[3].content
                        }
                    }">{{ newsList[3].title }}</RouterLink>
            </li>

        </ul>

        <div class="new-content">
            <RouterView></RouterView>
        </div>

    </div>







</template>

<script setup lang="ts" name="News">

import { reactive } from 'vue';
import { RouterView, RouterLink } from 'vue-router'


const newsList = reactive([
    { id: '01', title: '很好的抗癌食物', content: '西兰花' },
    { id: '02', title: '期末考多少分', content: '100分' },
    { id: '03', title: '震惊', content: '万万没想到' },
    { id: '04', title: '好消息！', content: '愚人节到了' }
])





</script>









<style scoped>
.news {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    height: 100%;
}

.news ul {
    margin-top: 30px;
    list-style: none;
    padding-left: 10px;

}

.news li>a {
    font-size: 18px;
    line-height: 40px;
    text-decoration: none;
    color: #64967E;
    text-shadow: 0 0 1px rgb(0, 84, 0);
}


.news-content {
    width: 70%;
    height: 90%;
    border: 1px solid;
    margin-top: 20px;
    border-radius: 10px;
}
</style>
